<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <body>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <style>
        .gridhello {
            border-collapse : collapse;
        }
        .gridhellocolumn {
            padding-left : 0;
        }
        .outhello {
            font-weight: bold;
        }
    </style>

    <a4j:form>
        <h:panelGrid columns="3" styleClass="gridhello" columnClasses="gridhellocolumn">
            <h:outputText value="Name:" />
            <h:inputText value="#{logInBean.username}" />
            <a4j:commandButton value="Say Hello" reRender="out" />
        </h:panelGrid>
    </a4j:form>
    <rich:spacer height="7"/>
    <br />
    <h:panelGroup id="out">
        <h:outputText value="Hello " rendered="#{not empty logInBean.username}" styleClass="outhello" />
        <h:outputText value="#{logInBean.username}" styleClass="outhello" />
        <h:outputText value="!" rendered="#{not empty logInBean.username}" styleClass="outhello" />
    </h:panelGroup>

    <br />
</ui:composition>
    </body>
</html>

